$(function() {

   $(".input input").focus(function() {

      $(this).parent(".input").each(function() {
         $("label", this).css({
            "line-height": "18px",
            "font-size": "18px",
            "font-weight": "100",
            "top": "0px"
         })
         $(".spin", this).css({
            "width": "100%"
         })
      });
   }).blur(function() {
      $(".spin").css({
         "width": "0px"
      })
      if ($(this).val() == "") {
         $(this).parent(".input").each(function() {
            $("label", this).css({
               "line-height": "60px",
               "font-size": "24px",
               "font-weight": "300",
               "top": "10px"
            })
         });

      }
   });

   $("#login").click(function(e) {
      var pX = e.pageX,
         pY = e.pageY,
         oX = parseInt($(this).offset().left),
         oY = parseInt($(this).offset().top);

      $(this).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
      $('.x-' + oX + '.y-' + oY + '').animate({
         "width": "500px",
         "height": "500px",
         "top": "-250px",
         "left": "-250px",

      }, 600);
      $("button", this).addClass('active');
	  let username = $("#name").val();
	  let password = $("#pass").val();
	  if(username.length>0 && password.length>0){
         $.ajax({
            type : 'post',
            url: "/login",
            data:  {username, password},
            success: function (res) {
                if(res.toString().length>0){
                  $.cookie('user_id',res.id);
                  $.cookie('user_name',res.username);
                  $.cookie('user_password',res.password);
                  $.cookie('user_sex',res.sex);
                  $.cookie('user_des',res.des);
                  window.location.href="/index?username="+username;
               }
               else{
                  alert('用户不存在或者密码错误~');
               }
            },
            error: function (err) {
               alert('出错啦~');
            }
         });
      }
	  else {
	     alert("请输入用户名或密码");
      }
   })

   $(".alt-2").click(function() {
      if (!$(this).hasClass('material-button')) {
         $(".shape").css({
            "width": "100%",
            "height": "100%",
            "transform": "rotate(0deg)"
         })

         setTimeout(function() {
            $(".overbox").css({
               "overflow": "initial"
            })
         }, 600)

         $(this).animate({
            "width": "140px",
            "height": "140px"
         }, 500, function() {
            $(".box").removeClass("back");

            $(this).removeClass('active')
         });

         $(".overbox .title").fadeOut(300);
         $(".overbox .input").fadeOut(300);
         $(".overbox .button").fadeOut(300);

         $(".alt-2").addClass('material-buton');
      }

   })

   $(".material-button").click(function() {

      if ($(this).hasClass('material-button')) {
         setTimeout(function() {
            $(".overbox").css({
               "overflow": "hidden"
            })
            $(".box").addClass("back");
         }, 200)
         $(this).addClass('active').animate({
            "width": "700px",
            "height": "700px"
         });

         setTimeout(function() {
            $(".shape").css({
               "width": "50%",
               "height": "50%",
               "transform": "rotate(45deg)"
            })

            $(".overbox .title").fadeIn(300);
            $(".overbox .input").fadeIn(300);
            $(".overbox .button").fadeIn(300);
         }, 700)

         $(this).removeClass('material-button');

      }

      if ($(".alt-2").hasClass('material-buton')) {
         $(".alt-2").removeClass('material-buton');
         $(".alt-2").addClass('material-button');
      }

   });

   $("#sign_up").click(function () {
      let regname = $("#regname").val();
      let regpass = $("#regpass").val();
      let reregpass = $("#reregpass").val();
      if(regpass==reregpass){
         if(regname!=null&&regpass!=null){
            $.ajax({
               type : 'post',
               url: "/sign",
               data:  {regname, regpass},
               success: function (res) {
                  if(res=="failed"){
                     alert('注册失败~');
                  }
                  else{
                     $.cookie('user_id',res.id);
                     $.cookie('user_name',res.username);
                     $.cookie('user_password',res.password);
                     $.cookie('user_sex',res.sex);
                     $.cookie('user_des',res.des);
                     window.location.href="/index?username="+regname;
                  }
               },
               error: function (err) {
                  alert('出错啦~');
               }
            });
         }
         else alert("用户名密码不能为空~")
      }
      else alert("密码不一致~");
   })

});